<template>
  <mt-popup v-model="popupVisible" position="right" :modal="false" class="transactionFlow-details">
    <div class="page transactionFlow-details">
      <div class="scroll-view">
        <customHeader middleTitle="交易详情" @leftCallBack="popupHide"></customHeader>
        <div class="page-body">
          <ul class="details-list">
            <li>
              <div class="top">
                <span>交易金额</span>
                <div>{{data.tradeType===0?data.supplierReceiveAmount:data.refundAmount}}</div>
              </div>
              <ul class="bottom">
                <li>
                  <span>交易类型</span>
                  <div>{{data.tradeTypeFormate}}</div>
                </li>
                <li>
                  <span>交易时间</span>
                  <div>{{data.tradeTimeFormate}}</div>
                </li>
                <li>
                  <span>交易方式</span>
                  <div>{{data.payTypeFormate}}</div>
                </li>
                <li>
                  <span>交易门店</span>
                  <div>{{data.shopName}}</div>
                </li>
                <li>
                  <span>来源</span>
                  <div>{{data.orderSourceFormate}}</div>
                </li>
                <li>
                  <span>操作人</span>
                  <div v-if="data.operator&&data.operator!=='null'&&data.operator!=='NULL'&&data.operator!==''">{{data.operator}}</div>
                  <div v-else>-</div>
                </li>
                <li>
                  <span>SN号/码id</span>
                  <div v-if="data.deviceId&&data.deviceId!=='null'&&data.deviceId!=='NULL'&&data.deviceId!==''">{{data.deviceId}}</div>
                  <div v-else>-</div>
                </li>
                <li>
                  <span>订单编号</span>
                  <div>{{data.orderId}}</div>
                </li>
                <li>
                  <span>第三方交易流水号</span>
                  <div class="info">{{data.thirdTradeNo}}</div>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </mt-popup>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast } from "mint-ui";
export default {
  name: "transactionFlowDetails",
  data() {
    return {
      popupVisible: false,
      data: {
        deviceId: null,
        operator: null,
        orderId: null,
        orderSource: null,
        payType: null,
        refundAmount: null,
        shopName: null,
        supplierReceiveAmount: null,
        thirdTradeNo: null,
        tradeTime: null,
        tradeType: null
      }
    };
  },
  props: {
    param: {
      type: Object
    }
  },
  methods: {
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      this.popupVisible = false;
    },
    loadData() {
      if (this.param && this.param != {}) {
        this.data = this.param;
        const tradeType = this.param.tradeType;
        let tradeTypeFormate = "";
        if (tradeType === 0) {
          tradeTypeFormate = "收款";
        } else if (tradeType === 1) {
          tradeTypeFormate = "退款";
        }
        this.data.tradeTypeFormate = tradeTypeFormate;

        const payType = this.param.payType;
        let payTypeFormate = "";
        //支付方式
        if (payType === 1) {
          payTypeFormate = "现金";
        } else if (payType === 2) {
          payTypeFormate = "支付宝";
        } else if (payType === 3) {
          payTypeFormate = "会员卡";
        } else if (payType === 4) {
          payTypeFormate = "POS刷卡";
        } else if (payType === 5) {
          payTypeFormate = "微信";
        } else if (payType === 6) {
          payTypeFormate = "ERP";
        } else if (payType === 7) {
          payTypeFormate = "云闪付";
        }
        this.data.payTypeFormate = payTypeFormate;

        const orderSource = this.param.orderSource;
        let orderSourceFormate = "未知";
        //订单平台来源
        if (orderSource === 1) {
          orderSourceFormate = "商家中心";
        }else if (orderSource === 2) {
          orderSourceFormate = "手持POS";
        }else if (orderSource === 3) {
          orderSourceFormate = "商家APP";
        } else if (orderSource === 4) {
          orderSourceFormate = "收银软件";
        } else if (orderSource === 5) {
          orderSourceFormate = "快享付码";
        } else if (orderSource === 6) {
          orderSourceFormate = "C端点餐";
        }else if (orderSource === 7) {
          orderSourceFormate = "桌边付";
        }else if (orderSource === 8) {
          orderSourceFormate = "智慧盒子";
        } else if (orderSource === 9) {
          orderSourceFormate = "饿了么外卖";
        }else if (orderSource === 10) {
          orderSourceFormate = "美团外卖";
        }else if (orderSource === 11) {
          orderSourceFormate = "其他外卖平台";
        }else if (orderSource === 12) {
          orderSourceFormate = "口碑预约点餐";
        }else if (orderSource === 13) {
          orderSourceFormate = "小程序码";
        } else if (orderSource === 14) {
          orderSourceFormate = "快小盒";
        } else if (orderSource === 15) {
          orderSourceFormate = "码卡龙";
        }
        this.data.orderSourceFormate = orderSourceFormate;

        this.data.tradeTimeFormate = CommonUtil.timestampToTime(
          this.param.tradeTime
        );
      } else {
        Toast("未获取到详情数据");
      }
    }
  },

  created() {},
  components: {
    customHeader
  },
  watch: {
    popupVisible(newV, oldV) {
      if (newV) {
        this.loadData();
      }
    }
  }
};
</script>
<style lang='scss' scoped>
@import "TransactionFlow";
</style>
